<template>
  <div class="nav">
    <div class="auto">
      用户登录

      <el-form :model="loginfrom" :rules="checkLogin" ref="fnn">
        <el-form-item label="用户名" label-width="70px" prop="account">
          <el-input class="first_input" type="text" v-model="loginfrom.account">
            <i slot="prefix" class="iconfont icon-yonghufill"></i>
          </el-input>
        </el-form-item>

        <el-form-item label="密码" label-width="70px" prop="password">
          <el-input
            class="sceod_input"
            :type="flag ? 'text' : 'password'"
            v-model="loginfrom.password"
          >
            <i slot="prefix" class="iconfont icon-mima"></i>
            <i
              slot="suffix"
              :class="[
                'iconfont',
                flag
                  ? 'icon-yanjing_huaban1'
                  : 'icon-05wangluoanquan_biyanjing',
              ]"
              @click="flag = !flag"
            ></i>
            <!-- <i slot="suffix" class="iconfont icon-05wangluoanquan_biyanjing"></i> -->
          </el-input>
        </el-form-item>

        <el-button type="danger" @click="fn()">登录</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import { api_login } from "../../api/users.js";
import local from "../../utlis/local.js";

export default {
  data() {
    return {
      flag: false,
      loginfrom: {
        account: "",
        password: "",
      },
      checkLogin: {
        account: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 12, message: "请输入6-9位字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "密码最短为6为字符最多为12",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    fn() {
      this.$refs["fnn"].validate(async (b) => {
        if (b) {
          let rst = await api_login("/users/checkLogin", this.loginfrom);
          let { code, msg, token } = rst;
          if (code == 1) {
            this.$message.error(msg);
          } else {
            local.set("sell_token", token);
            this.$router.replace("/home");
          }
          //当b的值为true时表示验证通过
          // this.$router.replace("/home");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.nav {
  // border: 1px solid red;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../../assets/images/f9285f7bb098452ece2331338dd54ceb.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  .auto {
    // border: 1px solid red;
    height: 300px;
    width: 400px;
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    color: white;
  }

  .first_input {
    margin-top: 10px;
  }
  .sceod_input {
    margin-top: 10px;
  }
}
</style>